<template>
	<div class="tabbar">
		<ul>
			<li
				v-for='(item,index) in routerList'
				:key='index'
				@click="switchTab(item.path)"
			>
				<img :src="$route.path.includes( item.path ) ? item.selected : item.active" alt="">
				<span :class="$route.path.includes( item.path ) ? 'active' : '' ">{{item.title}}</span>
			</li>
		</ul>
	</div>
</template>

<script>
	export default{
		data(){
			return {
				routerList:[
					{
						title:'首页',
						path:'/home',
						active:'./images/home.png',
						selected:'./images/home-select.png'
					},
					{
						title:'分类',
						path:'/list',
						active:'./images/list.png',
						selected:'./images/list-select.png'
					},
					{
						title:'购物车',
						path:'/cart',
						active:'./images/cart.png',
						selected:'./images/cart-select.png'
					},
					{
						title:'我的',
						path:'/my',
						active:'./images/my.png',
						selected:'./images/my-select.png'
					},
				]
			}
		},
		methods:{
			switchTab(path){
				// 判断当前路由是否等于path
				if(this.$route.path == path) return ;
				// 跳转对应路由
				this.$router.replace( path );
			}
		}
	}
</script>

<style scoped lang="scss">
	.tabbar{
		margin:0.4rem;
		width: 100%;
		height: 1.333333rem;
		ul{
			display: flex;
			justify-content: space-around;
			align-items: center;
			width: 100%;
			height: 1.333333rem;
			li{
				display: flex;
				flex-direction: column;
				align-items: center;
				img{
					width: 0.933333rem;
					height: 0.933333rem;
					
				}
				span{
					font-size: 0.373333rem;
					
				}
			}
		}
	}

	.active{
		color: red;
	}
</style>
